<template>
  <div class="bought">
  	<header-bar :text="title" :left="left"></header-bar>
		<div class="products_sel">
			<ul>
				<li :class="{sel_active:index == sel}" @click="changesel(index)" v-for="(item,index) in tabs" :key="index">{{item}}</li>
			</ul>
		</div>
		<div class="boughtList" 
			v-if="list.length > 0"
			v-infinite-scroll="loadMore"
			:infinite-scroll-distance="pageSize">
			<div v-for="(item, key) in list" :key="key" class="boughtLi" @click="handClick(key)" >
				<div class="li_left">
					<div>{{item.prod.name}}（{{item.prod.type==1?"固定":item.prod.type==2?"浮动":""}}）</div>
					<div>锁仓：<span style="color:#353535;">{{item.quantity}}{{item.prod.coinType}}</span></div>
					<div style="color:#888888;">
					<span>{{item.prod.dayType}}天定期</span>
					<span v-show="item.status == 4">到期时间：{{item.endDate}}</span>
					</div>
				</div>
				<div v-if="sel==1" class="li_right1">
					<div>
					获得收益<span>{{item.profitValue}}{{item.prod.coinType}}</span>
					</div>
				</div>
				<div v-if="sel==0" class="li_right0">
					<div style="height: 5px;"></div>
					<div class="profit">{{item.prod.profit}}%</div>
					<div>{{item.prod.type==1?"固定年化收益":item.prod.type==2?"预计年化收益":""}}</div>
				</div>
			</div>
			
		</div>
		<div class="noData" v-else>暂无数据</div>
  </div>
</template>
<script>
import moment from "moment";
import { Header, Indicator, InfiniteScroll, Toast } from "mint-ui";
import { owned, onceOwned } from "../api/api.js";
import headerBar from "./main/header";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
// {
//         prod:{
//           name:"12313",
//           type:1,
//           coinType:"ETH",
//           dayType:30,
//           profit:20
//         },
//         quantity:"1231",
//         endDate:"12313",
//         profitValue:12313
//       }
export default {
  name: "Bought",
  data() {
    return {
      msg: "",
      tabs: ["现持产品", "已到期的"],
      sel: 0,
      pageNum: 1,
      pageSize: 5,
      list: [],
      title: "已购产品",
      left: {
        status: true
      }
    };
  },
  computed: {
    ...mapState(["pageInfo"])
  },
  methods: {
    handClick(index) {
      this.$router.push({
        path: "/detail",
        query: { id: this.list[index].productId }
      });
    },
    getData(x, n) {
      this.sel = x;
      let para = {
        id: this.pageInfo.userinfo.id || 10000,
        pageNum: n,
        pageSize: this.pageSize
      };
      this.$ajaxGet(x == 0 ? "owned" : "onceOwned", para).then(res => {
        Indicator.close();
        if (res.code !== 200) {
          Toast({
            message: res.msg,
            position: "bottom",
            duration: 5000
          });
        } else {
          for (var i = 0; i < res.data.length; i++) {
            res.data[i].endDate = moment(new Date(res.data[i].endDate)).format("YYYY.MM.DD");
          }
          if (this.list == "") {
            this.list = res.data;
          } else {
            this.list = this.list.concat(res.data);
          }
        }
      });
    },
    changesel(b) {
      this.pageNum = 1;
      this.list = [];
      this.getData(b, this.pageNum);
      this.loadMore();
    },
    loadMore() {
      // Indicator.open("加载中...");
      this.pageNum = this.pageNum + 1;
      this.getData(this.sel, this.pageNum);
    }
  },
  components: {
    headerBar
  },
  mounted() {
    this.getData(0, 1);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/bought.css");
</style>
